﻿@using lwzlz.Core;
@{
    var memberLogin = ViewData["WebHeadMember"] as MemberLogin;
    var addressList = ViewData["WebHeadAddressList"] as List<Address>;
    var shoppingCartList = ViewData["WebHeadShoppingCartList"] as List<dynamic>;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沙孟海</title>
    <link rel="stylesheet" href="~/Areas/Mall/css/head.css">
    <link rel="stylesheet" href="~/Areas/Mall/css/list.css">
    <script type="text/javascript" src="~/Areas/Mall/js/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div class="head">
        <img src="~/Areas/Mall/image/logo.png" class="logo" />
        <div class="right">
            <img src="~/Areas/Mall/image/icon-head.png" class="head_icon" />
            <span>您好，@memberLogin.UserName</span>
            @*<span style="color: #FF0000">余额:0.00元 余量:0套 </span>*@
            <img src="~/Areas/Mall/image/arrow.png" class="arrow" />
            <div class="hide">
                <ul class="item">
                    <li>
                        <a href="@Url.Action("Index","Home")">管理首页</a>
                    </li>
                    <li>
                        <a href="@Url.Action("ResetPW","Home")">修改密码</a>
                    </li>
                    <li>
                        <a onclick="signOut()">退出登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="shopping_bag">
        <div class="open">
            <img src="~/Areas/Mall/image/shopping.png" height="32" width="32" />购物车
        </div>
        <div class="hide_shopping">
            <div class="scgwc-ul">
                <p class="sn-p2">选择收货地址<span class="close">×</span></p>
                <!--列表-->
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ltable">
                    <tbody id="tbodyAddress1">
                    </tbody>
                </table>
                <p class="sn-p2" style="height: 32px; line-height: 32px; margin-bottom: 10px; margin-top: 10px;">选购商品</p>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ltable">
                    <tbody id="tbodyShoppingCart">
                    </tbody>
                </table>
                <!--/列表-->
                <div class="scgwc-hj">
                    <span class="scgwc-s2" style="font-size: 14px;" id="d">
                        合计￥
                        <label id="allcount">0.00</label>
                    </span>
                </div>
                <div class="scgwc-hj">
                    <span class="scgwc-s2">
                        <a class="btn violet" style="color: #ffffff; font-size: 16px;" onclick="addOrder()">结算</a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="zhifu">
        <div class="head_zhifu"><a>×</a></div>
        <input id="txtOrderId" type="hidden" value="" />
        <p>共计：<span id="spaTotalAmount"></span>元</p>
        <div class="content_zhifu">
            <p>扫码支付</p>
            <img src="~/Areas/Mall/image/paycode.jpg">
        </div>
        <button onclick="confirmPay()">我已确认支付</button>
    </div>

    <div class="nav-left">
        <ul>
            <li class="top"><a href="@Url.Action("Index","Home")">我的书城</a></li>
            <li><a href="@Url.Action("List","Commodity")"><img src="~/Areas/Mall/image/nav_item.png" height="16" width="16" />进货商城</a></li>
            <li class="more"><a><img src="~/Areas/Mall/image/file.png" height="16" width="16" />购物订单<img src="~/Areas/Mall/image/add2.png" class="add"></a></li>
            <li class="hide"><a href="@Url.Action("List","Address")"><img src="~/Areas/Mall/image/nav_item.png" height="16" width="16" />收货地址</a></li>
            <li class="hide"><a href="@Url.Action("List","Order")"><img src="~/Areas/Mall/image/nav_item.png" height="16" width="16" />采购列表</a></li>
            <li><a href="@Url.Action("List","Student")"><img src="~/Areas/Mall/image/nav_item.png" height="16" width="16" />学习账户</a></li>
            <li><a href="@Url.Action("List","Sticker")"><img src="~/Areas/Mall/image/nav_item.png" height="16" width="16" />姓名贴</a></li>
        </ul>
        <div class="bottom">
            <p>网址：zbf.lwzlz.com</p>
        </div>
    </div>
    <section class="home">
        @RenderBody()
    </section>
</body>
</html>
<style type="text/css">
    .paginationjs {
        z-index: 0
    }
</style>
<script type="text/javascript" src="~/Areas/Mall/js/pagination.min.js"></script>
<script type="text/javascript">
    //顶部下拉
    $('.head .right .arrow,.head .right .hide').hover(function () {
        $('.hide').show();
    }, function () {
        $('.hide').hide();
    })

    //左侧菜单
    $('.nav-left').on('click', '.more', function () {
        $('.nav-left').find('.hide').show();
        $(this).find('.add').attr('src', '/Areas/Mall/image/-.png');
        $(this).find('.add').attr('class', 'del');
        $(this).attr('class', 'less');
    });
    $('.nav-left').on('click', '.less', function () {
        $('.nav-left').find('.hide').hide();
        $(this).find('.del').attr('src', '/Areas/Mall/image/add2.png');
        $(this).find('.del').attr('class', 'add');
        $(this).attr('class', 'more');
    })

    //购物车
    $('.head .right .arrow,.head .right .hide').hover(function () {
        $('.hide').show();
    }, function () {
        $('.hide').hide();
    });

    $('.hide_shopping').on('click', '.add', function () {
        let a = $(this).parent().find('.count').text();
        let c = parseInt(a);
        c++;
        $(this).parent().find('.count').text(c);
        let b = $(this).parent().attr('commodityId');
        OperationNumber(b,1)
    });
    $('.hide_shopping').on('click', '.less', function () {
        let a = $(this).parent().find('.count').text();
        let c = parseInt(a);
        if (c > 1) {
            c--;
            $(this).parent().find('.count').text(c);
            let b = $(this).parent().attr('commodityId');
            OperationNumber(b, 2)
        }
    });
    $('.shopping_bag').on('click', '.open', function (e) {
        $(this).parent().find('.hide_shopping').show();
        e.stopPropagation();
        getAddress();
        getShoppingCart();
    });
    $('.shopping_bag').on('click', '.hide_shopping', function (e) {
        $(this).parent().find('.hide_shopping').show();
        e.stopPropagation();
    });
    $('.shopping_bag').on('click', '.close', function (e) {
        $('.shopping_bag').find('.hide_shopping').hide();
        e.stopPropagation();
    });
    $('body').on('click', function () {
        $('.shopping_bag').find('.hide_shopping').hide();
    });
    $('.settlement').on('click', function () {
        $(".zhifu").show();
        $('.shopping_bag').find('.hide_shopping').hide();
    });
    $('.zhifu').on('click', ".head_zhifu a", function () {
        $(".zhifu").hide();
    });
    $('.zhifu').on('click', "button", function () {
        $(".zhifu").hide();
    });

    //登出
    function signOut() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("SignOut", "Home")',
            success: function (res) {
                if (res.Success) {
                    window.location.href = res.Data + '?r=' + (new Date()).valueOf();//直接跳转
                } else {
                    showTip(res.Message);
                }
            }
        });
    }

    //获取地址
    function getAddress() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetAddress", "ShoppingCart")',
            success: function (res) {
                if (res.Success) {
                    $("#tbodyAddress1").empty();
                    $(res.Data).each(function (index, item) {
                        $("#tbodyAddress1").append(`
                        <tr id="tr2308">
                            <td align="center" style="width: 10%">
                                <span class="checkall">
                                    <input name="address" type="radio" class="addresslist" value="` + item.Id + `" id="rad_` + item.Id + `">
                                </span>
                            </td>
                            <td align="center" style="width: 10%">`+ item.RealName + `</td>
                            <td align="center" style="width: 10%">`+ item.Mobile + `</td>
                            <td>`+ item.ProvinceName + `,` + item.CityName + `,` + item.SendAddress + `</td>
                        </tr>`);
                    });
                } else {
                    alert(res.Message);
                }
            }
        });
    }

    //获取购物车
    function getShoppingCart() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetShoppingCart", "ShoppingCart")',
            success: function (res) {
                if (res.Success) {
                    $("#tbodyShoppingCart").empty();
                    var title = `
                    <tr>
                        <th width="8%"></th>
                        <th width="15%"></th>
                        <th>商品名称</th>
                        <th width="10%">订购数量</th>
                        <th width="10%">商品价格</th>
                        <th width="10%">订购总价</th>
                        <th width="8%">操作</th>
                    </tr>`;
                    $("#tbodyShoppingCart").append(title);
                    $(res.Data).each(function (index, item) {
                        $("#tbodyShoppingCart").append(`
                        <tr>
                            <td align="center">
                                <input name="shoppingCart" id="che_` + item.CommodityId + `" onclick="calculationTotalAmount()" style="width: 20px; height: 20px;" type="checkbox" value="` + item.CommodityId + `">
                            </td>
                            <td align="center">
                                <a><img src="` + item.Pic + `" height="60" width="60"></a>
                            </td>
                            <td align="center">
                                <a href="detail.html">` + item.Name + `</a><br>
                            </td>
                            <td align="center">
                                <p style="display:inline-block;" commodityId="` + item.CommodityId + `">
                                  <a class="less">-</a><span class="count" >` + item.ShoppingCartNumber + `</span><a class="add">+</a>
                                </p>
                            </td>
                            <td align="center">
                                ` + item.Money + `
                                <input type="hidden">
                            </td>
                            <td align="center">
                                <label id="lab_` + item.CommodityId + `">` + calculationTotalMoney(item.ShoppingCartNumber, item.Money) + `</label>
                            </td>
                            <td align="center">
                                <a onclick="deleteShoppingCart(` + item.CommodityId + `)">删除</a>
                            </td>
                        </tr>`);
                    });

                    calculationTotalAmount();
                } else {
                    alert(res.Message);
                }
            }
        });
    }

    //删除购物车物品
    function deleteShoppingCart(commodityId) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("DeleteShoppingCart", "ShoppingCart")',
            data: { "CommodityId": commodityId },
            success: function (res) {
                if (res.Success) {
                    getShoppingCart();
                } else {
                    alert(res.Message);
                }
            }
        });
    }

    //操作购物车数量
    function OperationNumber(commodityId,type) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("OperationNumber", "ShoppingCart")',
            data: { "CommodityId": commodityId ,"Type":type},
            success: function (res) {
                if (res.Success) {
                    getShoppingCart();
                } else {
                    alert(res.Message);
                }
            }
        });
    }

    //计算单个商品合计金额
    function calculationTotalMoney(number, money) {
        let a = parseInt(number);
        let b = parseInt(money);
        let c = a * b;
        return c;
    }

    //计算合计金额
    function calculationTotalAmount() {
        var c = 0;
        $($('label[id^=lab_]')).each(function (index, item) {
            if ($(item).parent().parent().find("input[name='shoppingCart']").filter(':checked').length > 0) {
                var a = $(item).text();
                var b = parseInt(a);
                c += b;
            }
        });
        $("#allcount").text(c);
    }

    //下单
    function addOrder() {
        var addressId = $('input[id^=rad_').filter(':checked').val();
        if (addressId == undefined || addressId == null || addressId == "") {
            alert("请选择地址");
            return false;
        }

        var b = $('input[id^=che_').filter(':checked').length;
        if (b==0) {
            alert("请选择购买商品");
            return false;
        }

        var list = [];
        $('input[id^=che_').filter(':checked').each(function (index, item) {
            var commodityId = $(item).val();
            var number = $(item).parent().parent().find(".count").text();
            var item = commodityId + "-" + number;
            list.push(item);
        });

        $.ajax({
            type: "POST",
            url: '@Url.Action("AddOrder", "ShoppingCart")',
            data: { "AddressId": addressId, "OrderList": list },
            success: function (res) {
                if (res.Success) {
                    $("#spaTotalAmount").text(res.Data.TotalAmount);
                    $("#txtOrderId").val(res.Data.OrderId);
                    $(".zhifu").show();
                    $('.shopping_bag').find('.hide_shopping').hide();
                } else {
                    alert(res.Message);
                }
            }
        });
    }

    //确认支付
    function confirmPay() {
        var orderId = $("#txtOrderId").val();

        $.ajax({
            type: "POST",
            url: '@Url.Action("ConfirmPay", "ShoppingCart")',
            data: { "orderId": parseInt(orderId) },
            success: function (res) {
                if (res.Success) {
                    $(".zhifu").hide();
                    alert(res.Message);
                    if ($("#wrapper").length > 0) {
                        paging();
                    }
                } else {
                    alert(res.Message);
                }
            }
        });
    }
</script>